<template>
	<section class="top">
		<p>
			<span v-for="(item,index) in checkInTop" :class="{'has':has.indexOf(index)!=-1 }">
				{{Number(index)+1}}.{{item}}
				<div class="Triangle"></div>
				<div class="TrianLittle_top" :class="{'has':has.indexOf((Number(index)+1))!=-1 }"></div>
				<div class="TrianLittle_bottom" :class="{'has':has.indexOf((Number(index)+1))!=-1 }"></div>
			</span>
		</p>
		
	</section>
</template>

<script>
	export default{
		props:{
			currentIndex:0
		},
		data(){
			return{
				checkInTop:['选择房间','核验身份','付款','取房卡'],
				has:[0],
			}
		},
		watch:{
			currentIndex(newVal,oldVal){
				console.log("oldVal:"+oldVal)
				console.log("newVal:"+newVal)
				if(this.has.indexOf(newVal)===-1&&newVal!=0){
					this.has.push(newVal);
				}else{
					this.has.splice(this.has.indexOf(newVal)+1,1);
				}
				console.log(this.has);
			},
		},

		
		
	}
</script>

<style scoped="scoped">
.top{
	width: 800px;
	height: 33px;
}
p{
	height: 33px;
}
.Triangle
{
        height: 0;
    width: 0;
    border-left: 25px solid rgb(187,187,187);
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    position: absolute;
    top: 0;
    right: -25px;
}
span .TrianLittle_top{
	height: 0;
    width: 0;
    border-right: 25px solid rgb(187,187,187);
    border-top: 0px solid transparent;
    border-bottom: 17px solid transparent;
    position: absolute;
    top: 0;
    right: -29px;
}
span .TrianLittle_bottom{
	    height: 0;
    width: 0;
    border-right: 25px solid rgb(187,187,187);
    border-top: 17px solid transparent;
    border-bottom: 0px solid transparent;
    position: absolute;
    top: 17px;
    right: -29px;
}
span{
	width: 170px;
	background: rgb(187,187,187);
	color: #FFFFFF;
	display: inline-block;
	text-align: center;
    height: 34px;
    line-height: 34px;
    position: relative;
    margin-right: 29px;
}
span.has{
	background: rgb(214,114,2);
}
span.has .Triangle{
	  border-left: 25px solid rgb(214,114,2);
}
.TrianLittle_top.has{
	border-right: 25px solid rgb(214,114,2);
}
.TrianLittle_bottom.has{
	border-right: 25px solid rgb(214,114,2);
}
span:last-child .TrianLittle_top,span:last-child .TrianLittle_bottom{
	display: none;
}
</style>